<template>
  <div class="more-movies">
    <div class="movie-item" v-for="(item, index) in movies" :key="index" :id="index">
      <movie-thum :movie="item"></movie-thum>
    </div>
  </div>
</template>

<script>
import { getTheaters, getComingSoon } from '../../api/movie'
import MovieThum from '../../components/MovieThum'
export default {
  data () {
    return {
      movies: [],
      title: ''
    }
  },
  components: {
    MovieThum
  },
  onLoad (options) {
    this.title = options.title
    wx.setNavigationBarTitle({
      title: this.title
    })
  },
  mounted () {
    this.getMovies()
  },
  methods: {
    getMovies () {
      if (this.title === '正在热映') {
        let params = {city: '杭州', count: 21}
        getTheaters(params).then(res => {
          this.movies = res.subjects.map(item => {
            return {
              movieImg: item.images.large,
              movieName: item.title,
              rate: item.rating.average,
              id: item.id
            }
          })
          let addLength = 3 - (this.movies.length % 3)
          for (let i = 0; i < addLength; i++) {
            this.movies.push({})
          }
        })
      } else if (this.title === '即将上映') {
        let params = {count: 21}
        getComingSoon(params).then(res => {
          this.movies = res.subjects.map(item => {
            return {
              movieImg: item.images.large,
              movieName: item.title,
              rate: item.rating.average,
              id: item.id
            }
          })
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.more-movies {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 20rpx 0;
  .movie-item{
    width: 200rpx;
    height: 380rpx;
    display:inline-block;
  }
}
</style>


